<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>生意帮</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        html,
        body {
            background-color: transparent;
        }

        .boxB {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: #fff;
        }

        .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .aui-content {}

        .head_right .aui-pull-right {
            border: 1px solid #999;
            border-radius: 50%;
            height: 1rem;
            width: 1rem;
            text-align: center;
            line-height: 1rem;
        }

        .aui-iconfont {
            font-size: 0.6rem;
            vertical-align: top;
        }

        .head_right {
            position: relative;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        #app .inp_header {
            color: #333;
            font-size: 0.9rem;
            text-align: center;
            padding: 0.75rem;
        }

        .boxB li,.boxB ul {
            text-align: center;
            background-size: 100% 0;
            padding: 0;
            font-size: 0;
            position: relative;
            overflow: hidden;
        }

        .inp_list div {
            width: 2rem;
            height: 2rem;
            margin: 0 0.3rem;
            display: inline-block;
            line-height: 2rem;
            text-align: center;
            border: 1px solid #ccc;
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            position: relative;
        }

        .inp_list .active:after {
            position: absolute;
            content: '*';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 2rem;
            /*border-radius: 50%;*/
            font-size: 1.2rem;
            /*background-color: #333;*/
        }

        .inp_list input {
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 12px;
            opacity: 0;
            -webkit-opacity: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="boxB">
            <div class="aui-content">
                <ul class="aui-list aui-media-list">
                    <li class="inp_header">
                        请输入一次新密码
                    </li>
                    <li class="inp_list" @click="inpFocu()">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <input type="number" id="inp" name="" value="" v-model='password'>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript" src="../../script/aui-lazyload.js"></script>
<script type="text/javascript">
    apiready = function() {
        var app = new Vue({
            el: "#app",
            data: {
                password: '',
                code: api.pageParam.code
            },
            created: function() {
                var $_this = this
            },
            methods: {
                gaiban: function() {
                    var $_this = this;

                },
                inpFocu: function() {
                    $('#inp').focus();
                },
                openPassword: function(name, type) {
                  var $_this = this;
                    api.openWin({
                        name: name,
                        url: './five_frame_header2.html',
                        pageParam: {
                            type: type,
                            name: name,
                            code: $_this.code,
                            password: $_this.password
                        }
                    });
                }
            },
            watch: {
                password: function() {
                    var $_this = this
                    $('.inp_list div').each(function(i) {
                        if (i < $_this.password.length) {
                            $('.inp_list div').eq(i).addClass('active')
                        } else {
                            $('.inp_list div').eq(i).removeClass('active')
                        }
                    })
                    if ($_this.password.length >= 6) {
                        $('#inp').blur();
                        $_this.openPassword('pay_password2','确认密码')
                    }
                }
            }
        })

    };
</script>

</html>
